@charset "UTF-8";
@import "compass/utilities/sprites";         // Include compass sprite helpers
@import "compass/css3/background-size";      // Include helper to calc background size


@mixin retina-sprite($name, $hover: false, $active: false) {
    @include _retina-sprite($name, $sprites, $sprites2x, $hover, $active);
}

//    retina-sprite的用法
//
//    @include retina-sprite(name, $spritemap1, $spritemap2)
//    @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0])
//
//    `dimensions` 设为 true, 自动设置 width/height属性.
//
//    padding属性， 合图各个图片之间的间隙
//
@mixin _retina-sprite($name, $sprites, $sprites2x, $hover, $active, $dimensions: true, $pad: 0) {
    @if $dimensions == true {
        @include sprite-dimensions($sprites, $name);
    }
    background-image: sprite-url($sprites);
    background-position: sprite-position($sprites, $name, -$pad, -$pad);
    background-repeat: no-repeat;

    @if $hover == true {
        $name_hover: $name + _hover;
        &:hover {
            background-position: sprite-position($sprites, $name_hover, -$pad, -$pad);
        }
    }
    @if $active == true {
        $name_active: $name + _active;
        &:active {
            background-position: sprite-position($sprites, $name_active, -$pad, -$pad);
        }
    }

    @if $pad > 0 {
        padding: $pad;
    }

    @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        & {
            $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2);
            background-image: sprite-url($sprites2x);
            background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
            @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);

            @if $hover == true {
                $name_hover: $name + _hover;
                &:hover{
                    $pos: sprite-position($sprites2x, $name_hover, -$pad * 2, -$pad * 2);
                    background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
                }
            }
            @if $active == true {
                $name_active: $name + _active;
                &:active{
                    $pos: sprite-position($sprites2x, $name_active, -$pad * 2, -$pad * 2);
                    background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
                }
            }
        }
    }
}
